<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三" /></p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <script>
        /* 
         一、添加功能  
             1.获取 input里的信息  
             2.当点击添加的时候才会添加获取的input框信息
             3.需要把信息组装成 元素  然后再添加到页面
        */
        // 1.获取信息相关的元素，不是信息
        // var usernameEle = document.querySelector("#username");
        // var ageEle = document.querySelector("#age");
        // var genderEle = document.querySelector("#gender");
        // // 2.点击添加的时候获取信息
        // var addBtnEle = document.querySelector("#addBtn");
        // var tbodyEle = document.querySelector("#table tbody")

        // addBtnEle.onclick = function () {
        //     // 获取先关信息
        //     var username = usernameEle.value;
        //     var age = ageEle.value;
        //     var gender = genderEle.value;
        //     // console.log(username,age,gender)
        //     // 3.组装成dom结构 添加到指定的位置里
        //     var tr = document.createElement("tr");
        //     // <tr></tr>  -----><tr>  innerHTML </tr> 
        //     // <tr><td>张三</td><td>20</td><td>男</td></tr>
        //     tr.innerHTML = "<td>"+username+"</td><td>"+age+"</td><td>"+gender+"</td><td>删除</td>";
        //     tbodyEle.appendChild(tr);
        // }





        // 二、删除功能 
        /*  
        思维一：添加数据的时候 把数据存在数组里  ， 然后再渲染数据 ，删除指定数据 ，重新渲染 ，删除的事件要重新绑定
        思维二： 通过节点查找删除当前的tr 当点击删除的时候查找父级元素 找到tr父级 然后再把tr元素删除
          1.通过节点查找删除 一行 tr
        
        */

        // var usernameEle = document.querySelector("#username");
        // var ageEle = document.querySelector("#age");
        // var genderEle = document.querySelector("#gender");
        // // 2.点击添加的时候获取信息
        // var addBtnEle = document.querySelector("#addBtn");
        // var tbodyEle = document.querySelector("#table tbody")


        // addBtnEle.onclick = function () {
        //     // 获取先关信息
        //     var username = usernameEle.value;
        //     var age = ageEle.value;
        //     var gender = genderEle.value;
        //     // console.log(username,age,gender)
        //     // 3.组装成dom结构 添加到指定的位置里
        //     var tr = document.createElement("tr");
        //     // <tr></tr>  -----><tr>  innerHTML </tr> 
        //     // <tr><td>张三</td><td>20</td><td>男</td></tr>
        //     tr.innerHTML = "<td>"+username+"</td><td>"+age+"</td><td>"+gender+"</td><td><button class='del'>删除</button></td>";
        //     // 通过创建出来的元素获取添加的删除按钮元素
        //     var delEle = tr.querySelector(".del");
        //     console.log(delEle);
        //     tbodyEle.appendChild(tr);
        // }

        // addBtnEle.onclick = function () {
        //     // 获取先关信息
        //     var username = usernameEle.value;
        //     var age = ageEle.value;
        //     var gender = genderEle.value;
        //     var obj = {
        //         username:username,
        //         age:age,
        //         gender:gender,
        //         del:'删除'
        //     }
        //     // console.log(username,age,gender)
        //     // 3.组装成dom结构 添加到指定的位置里
        //     var tr = document.createElement("tr");
        //     // <tr></tr>  -----><tr>  innerHTML </tr> 
        //     // <tr><td>张三</td><td>20</td><td>男</td></tr>

        //     for(var key in obj){
        //         var td = document.createElement("td");
        //         td.innerHTML = obj[key];
        //         tr.appendChild(td);
        //         if(key==='del'){
        //             // console.log(td);  //删除按钮的td
        //             td.onclick = function () {
        //                 // console.log("点击删除了",this);
        //                 // 把当前td所在的tr删除掉；
        //                 // 1.找到tr
        //                 console.log( this.parentNode);
        //                 var trItem =  this.parentNode;
        //                 var tbodyItem = this.parentNode.parentNode;
        //                 // 把当前的tr删除掉
        //                 tbodyItem.removeChild(trItem);
        //             }
        //         }
        //     }

        //     tbodyEle.appendChild(tr);
        // }


        // 三、排序功能

        /* 
            把数据 先进行排列 然后重新进行渲染 
        
        */
        var usernameEle = document.querySelector("#username");
        var ageEle = document.querySelector("#age");
        var genderEle = document.querySelector("#gender");
        // 2.点击添加的时候获取信息
        var addBtnEle = document.querySelector("#addBtn");
        var tbodyEle = document.querySelector("#table tbody")

        // 获取排序的按钮
        var sortBtnEle = document.querySelector("#sortBtn");
        var arr = []; //存放所有添加的数据


        addBtnEle.onclick = function () {
            // 获取先关信息
            var username = usernameEle.value;
            var age = ageEle.value;
            var gender = genderEle.value;
            var obj = {
                username: username,
                age: age,
                gender: gender,
                del: '删除'
            }
            arr.push(obj);
            // console.log(arr);
            // 第一次点击添加的时候  arr = [{username:'张三',age:20,gender:'男':del:'删除'}];
            // 调用renderTable的时候  会根据arr 生成 dom元素

            // 第二次点击的时候arr = [{username:'张三',age:20,gender:'男':del:'删除'},{username:'张三',age:21,gender:'男':del:'删除'}]
           //    调用renderTable的时候  会根据arr 生成 dom元素
            renderTable(arr);

        }  

        var judge = true;

        sortBtnEle.onclick = function () {
            judge = !judge;
            console.log(judge);
            arr.sort(function (a,b) {
                return judge?a.age-b.age:b.age-a.age;
            })
            renderTable(arr); 
        }

        // 事件委托 ，把每个删除的事件 委托给父级的 tbodyEle上 这样我们的事件只用绑定一次
        tbodyEle.addEventListener("click",function(e){
            var e = e || window.event;
            // console.log(e.target);
            if(e.target.className=='del'){
                    e.target.parentNode.remove();
            }
        })


        function renderTable(arr) {
            // 创建tr 同时给每一tr绑定click事件
            // 渲染之前 清空tbody
            tbodyEle.innerHTML = "";
            for (var i = 0; i < arr.length; i++) {
                var obj = arr[i];
                // 生成一个tr
                var tr = document.createElement("tr");
                for (var key in obj) {
                    var td = document.createElement("td");
                    td.innerHTML = obj[key];
                    tr.appendChild(td);
                    if(key=='del'){
                        td.className = "del";
                    }
                }
                tbodyEle.appendChild(tr);
            }

        }


    </script>
</body>

</html>